CSSクラス – Dart逆引きリファレンス
CSSクラス（CSS classes）
基本的には「Element」オブジェクトが持つ「classes」プロパティを操作します。「classes」プロパティは重複要素を許可しない配列である「Set」インタフェース型のオブジェクトです。
ExampleCSSclasses.html
<!DOCTYPE html>
<html>
<head>
<title>ExampleCSSclasses</title>
<style type="text/css">
.hello {
color: #CCC;
text-shadow: 3px 3px 2px black;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1>ExampleCSSclasses</h1>
<h2 id="toc-dart-is-not-running" id="status" class="hello">dart is not running</h2>
<div><button id="btn-add">Add</button><button id="btn-remove">Remove</button></div>
<script type="application/dart" src="ExampleCSSclasses.dart"></script>
<script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
要素にクラス名を追加したい
「add」メソッドを使用してクラス名を追加します。
ExampleCSSclasses.dart
#import('dart:html');
void main() {
HeadingElement status = document.query('#status');
show('Hello, World!');
document.query('#btn-add').on.click.add((event) => status.classes.add('red'));
document.query('#btn-remove').on.click.add((event) => status.classes.remove('red'));
}
void show(String message) {
document.query('#status').innerHTML = message;
}
要素から特定のクラス名を除去したい
「remove」メソッドを使用して特定のクラス名を除去します。
ExampleCSSclasses.dart
#import('dart:html');
void main() {
HeadingElement status = document.query('#status');
show('Hello, World!');
document.query('#btn-add').on.click.add((event) => status.classes.add('red'));
document.query('#btn-remove').on.click.add((event) => status.classes.remove('red'));
}
void show(String message) {
document.query('#status').innerHTML = message;
}
